<template>
  <view>
    <view class="goods-list">
      <block v-for="(goods, i) in goodsList" :key="i">
     <my-goods @demo1="demo1" :goods='goods'></my-goods>
     </block>
     </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
        // 测试传值
        demo:'',
        // 添加分页功能的函数防抖
        isLoading: false,
        // 创建搜索参数
				params:{
          query:'',
          cid:'',
          // 配置分页
          pagenum:1,
          pagesize:10
        },
        // 获取服务器数据的总数 用于判断数据是否请求完毕
        total:0,
        // 储存获取到的数据
        goodsList:[]
			};
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数 
		this.params.query = option.query || ''
    this.params.cid = option.cid || ''
    this.getList()
		 },
     onReachBottom() {
       // 用户下滑更新分页数据
       // 判断是否存在数据(分页数*页码 >= 总条数)
       if(this.params.pagenum * this.params.pagesize >= this.total){
         return uni.$showMsg('已经到底了')
       }
       // 判断函数节流
       if(this.isLoading) return
       // 进行分页获取数据(页码+1)
       this.params.pagenum +=1
       //  重新获取分页修改后的列表数据
       this.getList()
     },
     onPullDownRefresh() {
       // 用户刷新后进行 
       // 清空数据
       this.goodsList = []
       // 分页设置为1
       this.params.pagenum = 1
       // 重新发起请请求
       this.getList(uni.stopPullDownRefresh)
     },
     filters:{
         // 把数字处理为带两位小数点的数字
         tofixed(num) {
           console.log(typeof(num))
           return num.toFixed(2)
         }
     },
     methods:{
       demo1(data){
         this.demo = data
       },
       async getList(fn){
         // 发送请求后 启动函数节流
         this.isLoading = true
         // 获取搜索数据显示的列表
         const { data:{message,meta} } = await uni.$http.get('/api/public/v1/goods/search',this.params)
        // 数据获取完毕后 停止函数节流
           this.isLoading = false
        // 判断 如果是刷新动作 获取完数据后 停止刷新
        fn && fn()
         if(meta.status !== 200) return uni.$showMsg()
            // 为数据赋值 之前的数据 + 之后的数据
        this.goodsList =[...this.goodsList,... message.goods]
        // 获取最大条数
        this.total = message.total
       }
     }
	}
</script>

<style lang="scss">
 .goods-item {
    display: flex;
    padding: 10px 5px;
    border-bottom: 1px solid #f0f0f0;

    .goods-item-left {
      margin-right: 5px;

      .goods-pic {
        width: 100px;
        height: 100px;
        display: block;
      }
    }

    .goods-item-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .goods-name {
        font-size: 13px;
      }

      .goods-price {
        font-size: 16px;
        color: #c00000;
      }
    }
  }
</style>
